<template>
<div class="list-wrapper" ref="wrapper">
  <div>
    <div class="list-title">当前城市</div>
    <div class="city-con">
      <div class="city-name">{{this.currentCity}}</div>
    </div>
    <div class="list-title">热门城市</div>
    <div class="city-con">
      <div class="city-name"
        v-for="item of hotCities"
        :key="item.id"
        @touchstart="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd(item.name)"
      >
        {{item.name}}
      </div>
    </div>
    <div v-for="(item,key) of cities" :key="key">
      <div class="list-title" :id="key" :ref="key">{{key}}</div>
      <div class="city-c">
        <ul>
          <li
            v-for="i of item"
            :key="i.id"
            @touchstart="handleTouchStart"
            @touchmove="handleTouchMove"
            @touchend="handleTouchEnd(i.name)"
          >
            {{i.name}}
          </li>
        </ul>
      </div>
    </div>
    <div class="bottom-line"></div>
  </div>
</div>
</template>

<script>
import BScroll from 'better-scroll'
import {mapState, mapMutations} from 'vuex'
export default {
  data () {
    return {
      touchStatus: false
    }
  },
  props: {
    hotCities: Array,
    cities: Object,
    letter: String
  },
  mounted () {
    // this.scroll = new BScroll('.list-wrapper')  // 直接使用选择器也可以
    this.scroll = new BScroll(this.$refs.wrapper)
  },
  computed: {
    // 使用mapState，把this.currentCity 映射给了 this.$store.state.city
    ...mapState({
      currentCity: 'city'
    })
  },
  methods: {
    handleTouchStart () {
      this.touchStatus = true
    },
    handleTouchMove () {
      this.touchStatus = false
    },
    handleTouchEnd (city) {
      if (this.touchStatus) {
        // this.$store.dispatch('changeCity', city)  // 如果没有异步请求和批量操作，可省略这步，直接使用commit提交到mutations
        // this.$store.commit('changeCity', city) // 使用mapState之后，该方法可直接改写下面的格式
        this.touchStatus = false
        this.changeCity(city)
        this.$router.push('/')
      }
    },
    // 使用mapMutations，把this.changeCity(city) 映射给了 this.$store.commit('changeCity', city)
    ...mapMutations(
      ['changeCity']
    )
  },
  watch: {
    letter () {
      if (this.letter) {
        // this.scroll.scrollToElement('#' + this.letter)  // 直接使用选择器也可以，而且更简单
        let el = this.$refs[this.letter][0]
        this.scroll.scrollToElement(el)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~_style/var.styl'
.list-wrapper
  position:absolute
  top:1.8rem
  bottom:0
  left:0
  right:0
  overflow:hidden
  .list-title
    line-height:.7rem
    box-sizing:border-box
    padding-left:.3rem
    font-size:.28rem
    background:#efefef
    position:relative
  .city-con
    width:100%
    overflow:hidden
    padding-bottom:.2rem
    .city-name
      width:26%
      float:left
      margin:.2rem 0 0 .2rem
      border-radius:.1rem
      background:#fff
      line-height:.5rem
      border:1px solid #ccc
      text-align:center
  .city-c ul
    overflow:hidden
    margin:0 -2px -2px 0
    li
      float:left
      width:25%
      height:.8rem
      line-height:.8rem
      overflow:hidden
      border:1px solid #cacaca
      border-width:0 1px 1px 0
      box-sizing:border-box
      text-align:center
      ellipsis()
  .bottom-line
    width:100%
    height:2px
    background:#fff
    position: relative
</style>
